<template>
  <div class="drawer-box">
    <div class="info-box">
      <div class="left">
        <div class="info-item">
          <span class="labelS">设备名称：</span>
          <span class="contentS">{{ detailInfo.deviceName }}</span>
        </div>
        <div class="info-item">
          <span class="labelS">设备编号：</span>
          <span class="contentS">{{ detailInfo.deviceNum }}</span>
        </div>
        <div class="info-item">
          <span class="labelS">资产编号：</span>
          <span class="contentS">{{ detailInfo.assetNum }}</span>
        </div>
        <div class="info-item">
          <span class="labelS">描述信息</span>
          <span class="content-status"
            >设备状态:
            <span class="circle-lan"></span>
            <span>{{ detailInfo.status }}</span>
          </span>
          <span class="content-status"
            >使用状态:
            <span class="circle-lv"></span>
            <span>{{ detailInfo.useStatus }}</span>
          </span>
          <!-- <span class="content-status"
          >设备等级:
          <span class="circle-zi"></span>
          <span>B(重要)</span>
        </span> -->
        </div>
      </div>
      <img class="account1" src="/images/acocunt1.png" alt="" />
      <img class="account2" :src="detailInfo.qrCode" alt="" />
    </div>
    <div class="tab-box">
      <el-tabs tab-position="left">
        <el-tab-pane label="基本信息">
          <div class="basic-box-con">
            <div class="basic-big">
              <div class="box-card">
                <IconTitle title="基本信息" imgUrl="yunwei">
                  <span class="slot">品牌管理</span>
                </IconTitle>
                <div class="card-item">
                  <span>设备类别:</span>
                  <div class="card-con">{{ detailInfo.brandName }}</div>
                </div>
                <div class="card-item">
                  <span>供应商:</span>
                  <div class="card-con">
                    <img
                      class="acount-svg"
                      src="/images/acount3.png"
                    />{{ detailInfo.supplierName }}</div>
                </div>
                <div class="card-item">
                  <span>规格型号:</span>
                  <div class="card-con">{{ detailInfo.specification }}</div>
                </div>
                <div class="card-item">
                  <span>品牌:</span>
                  <div class="card-con">{{ detailInfo.brandName }}</div>
                </div>
                <div class="card-item">
                  <span>保修期至:</span>
                  <div class="card-con">{{ detailInfo.warrantyDate }}</div>
                </div>
                <div class="card-item">
                  <span>启用期:</span>
                  <div class="card-con">{{ detailInfo.introductionDate }}</div>
                </div>
                <div class="card-item">
                  <span>预计报废日期:</span>
                  <div class="card-con">{{ detailInfo.expectedScrapDate }}</div>
                </div>
                <div class="card-item">
                  <span>负责人:</span>
                  <div class="card-con">张君宝</div>
                </div>
                <div class="card-item">
                  <span>所属部门:</span>
                  <div class="card-con">制造部</div>
                </div>
                <div class="card-item">
                  <span>设备地址:</span>
                  <div class="card-con">
                    <img
                      class="acount-svg"
                      src="/images/acount2.png"
                    />

                    {{ detailInfo.location }}
                  </div>
                </div>
              </div>
              <div class="box-card">
                <IconTitle title="设备图片" imgUrl="yunwei">
                  <span class="slot">品牌管理</span>
                </IconTitle>
                <div class="image-box">
                  <img
                    width="100px"
                    :src="item.url"
                    alt=""
                    v-for="(item, index) in detailInfo.imgArray"
                  />
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="关联信息">
          <div class="basic-box-con">
            <div class="basic-big">
              <div class="box-card">
                <IconTitle title="关联的父设备" imgUrl="yunwei">
                  <span class="slot">品牌管理</span>
                </IconTitle>
                <!-- 设备文档 -->
                <el-table
                  :data="deviceData"
                  border
                  style="width: 100%"
                  :header-cell-style="{
                    background: '#f8f8f9',
                    color: '#606266',
                  }"
                  @selection-change="deviceSelectionChange"
                >
                  <el-table-column type="selection" align="center" width="55" />
                  <el-table-column prop="date" label="计划编号" align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="设备名称" align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="品牌" align="center">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="规格型号"
                    align="center"
                  >
                  </el-table-column>
                </el-table>
              </div>
              <div class="box-card">
                <IconTitle title="设备关联备件" imgUrl="yunwei">
                  <span class="slot">品牌管理</span>
                </IconTitle>
                <!-- 设备文档 -->
                <el-table
                  :data="deviceData"
                  border
                  style="width: 100%"
                  :header-cell-style="{
                    background: '#f8f8f9',
                    color: '#606266',
                  }"
                  @selection-change="deviceSelectionChange"
                >
                  <el-table-column type="selection" align="center" width="55" />
                  <el-table-column prop="date" label="备件编号" align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="备件名称" align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="品牌" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="类别" align="center">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="维保排名">维保排名</el-tab-pane>
        <el-tab-pane label="最新点检">最新点检</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import IconTitle from "@/components/icon-title/index.vue";
export default {
  name: "drawer",
  components: {
    IconTitle,
  },

  props: {
    detailInfo: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      deviceData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "浙大中空",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "浙大中空",
        },
      ],
    };
  },

  methods: {
    deviceSelectionChange() {},
  },
};
</script>
<style   lang="scss" scoped>
@import "@/styles/mixin.scss";
@import "@/styles/color.scss";
::v-deep .el-drawer__body {
  overflow: auto;
}
.drawer-box {
  font-size: 12px;
  ::v-deep .el-tabs__item {
    font-size: 12px;
  }
  .info-box {
    width: 100%;
    padding: 0 20px 20px 20px;
    border-bottom: 1px solid #f2f2f5;
    margin-bottom: 20px;
    position: relative;
    .account1 {
      display: inline-block;
      width: 150px;
      //  height: 143px;

      position: absolute;
      left: 50%;
      top: -30px;
    }
     .account2 {
      display: inline-block;
      width: 120px;
      //  height: 143px;

      position: absolute;
      right:20px;
      top: -20px;
    }

  }
  .info-item {
    display: flex;
    margin-bottom: 10px;
    .labelS {
      width: 15%;
      font-size: 12px;
      color: #888;
    }
    .contentS {
      font-weight: bold;
      color: #101010;
      display: inline-block;
    }
    .content-status {
      margin-right: 25px;
      .circle-lan {
        margin-left: 10px;
        @include gradeCircle(10px, #498ae8);
      }
      .circle-lv {
        margin-left: 10px;
        @include gradeCircle(10px, $theme);
      }
      .circle-zi {
        margin-left: 10px;
        @include gradeCircle(10px, #7748d4);
      }
    }
  }
  .tab-box {
    .basic-box-con {
      overflow: auto;
      height: 500px;
      .basic-big {
        padding-bottom: 100px;

        .box-card {
          padding: 10px;
          box-shadow: 0px 0px 7px 0px #eff2f5;
          margin: 5px;
          .card-item {
            display: flex;
            align-items: center;
            margin-top: 10px;
            span {
              display: inline-block;
              width: 15%;
              text-align: right;
              color: #888;
              margin-right: 20px;
            }
            .card-con {
              color: #101010;
              display: flex;
              align-items: center;
              .acount-svg {
                display: inline-block;
                width: 18px;
                height: 18px;
                margin-right: 5px;
              }
            }
          }
          .image-box {
            display: flex;
            flex-wrap: wrap;
            img {
              display: inline-block;
              margin-right: 15px;
              margin-top: 10px;
            }
          }
          .el-table {
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>